<template>
  <view class="container">
    <!-- 顶部 搜索 banner -->
    <view>
      <u-navbar
        title="益连弘生活"
        title-size="36"
        :is-back="false"
        title-color="#fff"
        :background="scrollTop >= 40 ? background1 : background"
        :border-bottom="false"
      >
        <view class="slot-wrap">
          <view style="width: 690rpx; overflow: auto">
            <view class="location" @click="onCity">
              <u-icon
                style="vertical-align: middle; margin-right: 10rpx"
                name="/static/dw.png"
                size="30rpx"
                mode=""
              ></u-icon>
              <text class="address u-line-1"
                >{{ address.cityName ? subCity(address.cityName) : '选择' }}
              </text>
              <u-icon
                style="margin-left: 10rpx"
                name="arrow-down"
                color="#ffffff"
                size="26"
              ></u-icon>
            </view>
          </view>
        </view>
      </u-navbar>
      <view style="position: relative; height: 200rpx">
        <view
          class="contentBg dis-flex flex-x-bottom"
          :style="{
            paddingTop: `${statusBarHeight + navbarHeight}px`,
            top: `-${statusBarHeight + navbarHeight}px`,
            backgroundImage: `url(${getImageUrl('bg.png')})`
          }"
        >
          <view class="searchView flex-1" @click="onSearch">
            <u-search
              placeholder="搜索所需商品"
              height="64"
              :show-action="false"
              style="width: 100%; opacity: 0.6"
            ></u-search>
          </view>
          <view class="zixuan" @click="routeTo('/other/message-center/message-center')">
            <u-image src="@/static/zx.png" width="50rpx" height="50rpx"></u-image>
          </view>
        </view>
        <view class="contentBanner">
          <Banner :bannerList="bannerList" />
        </view>
      </view>
    </view>
    <!-- 公告栏 -->
    <view class="specialBanner">
      <Special
        :ggList="merchantOrderCount > 0 || riderOrderCount > 0 ? [] : ggList"
        @click.native="handleSpecialClick"
      >
        <view v-if="merchantOrderCount > 0 || riderOrderCount > 0" class="dis-flex flex-x-baseline">
          <text v-if="merchantOrderCount > 0">【商家】</text>
          <text v-if="riderOrderCount > 0">【配送员】</text>
          <text>当前有</text>
          <text style="color: red; font-weight: bold"
            >{{ merchantOrderCount || riderOrderCount }}笔订单</text
          >
          <text>需要处理</text>
        </view>
      </Special>
    </view>
    <!-- 导航栏 -->
    <view class="cate-content">
      <view
        v-if="menuListnn.length <= 5"
        @click="onMenuPath(item)"
        v-for="(item, index1) in menuListnn"
        :key="index1"
        class="type-nav"
      >
        <view class="cate-item">
          <u-image class="" :src="item.picUrl" height="90rpx" width="90rpx"></u-image>
          <view class="cate-name">{{ item.title }}</view>
        </view>
      </view>
      <scroll-view
        v-else
        class="cate-left"
        :scroll-x="true"
        :show-scrollbar="false"
        :enhanced="true"
        @touchmove.stop.prevent
      >
        <view
          @click="onMenuPath(item)"
          v-for="(item, index2) in menuListnn"
          :key="index2"
          class="type-nav"
        >
          <view class="cate-item">
            <u-image class="" :src="item.picUrl" height="90rpx" width="90rpx"></u-image>
            <view class="cate-name">{{ item.title }}</view>
          </view>
        </view>
      </scroll-view>
    </view>
    <!-- <view class="plate-type-box dis-flex">
			<view class="plate-item dis-flex flex-y-center" :class="checkPlateTypeIndex == i ? 'checked' : ''"
				v-for="(type,i) in palteType" :key="i" @click="onCat(i + 1)">
				<text>{{type.name}}</text>
				<image class="plate-item-image" v-if="checkPlateTypeIndex == i" src="@/static/hxxz.png">
				</image>
			</view>
		</view>
		<view class="tabs-box" v-if="checkPlateTypeIndex == 0">
			<scroll-view :show-scrollbar="false" :enhanced="true" class="scroll-x-box" scroll-x="true"
				@touchmove.stop.prevent>
				<view @click="onStoreCategory(t)" :class="checkedTabIndex == t ? 'tabs-checked' : ''"
					class="scroll-x-item tabs-box-item" v-for="(tab,t) in tabsList" :key="t">
					<text>{{tab.title}}</text>
				</view>
			</scroll-view>
    	</view>
        <view class="tabs-box" v-if="checkPlateTypeIndex == 1">
            <scroll-view :show-scrollbar="false" :enhanced="true" class="scroll-x-box" scroll-x="true"
				@touchmove.stop.prevent>
				<view @click="onXinxiCategory(t)" :class="checkedTab1Index == t ? 'tabs-checked' : ''"
					class="scroll-x-item tabs-box-item" v-for="(tab,t) in tabsList1" :key="t">
					<text>{{tab.name}}</text>
				</view>
			</scroll-view>
		</view> -->
    <!-- 店铺列表 -->
    <!-- <view class="goods_area" v-if="checkPlateTypeIndex == 0">
						<StoreBox :itemList="itemList[0]"></StoreBox>
					</view> -->
    <view class="goods_area" v-if="checkPlateTypeIndex == 0">
      <view v-if="goodsList && goodsList.length > 0">
        <u-waterfall v-model="goodsList" ref="uWaterfall">
          <template v-slot:left="{ leftList }">
            <block>
              <view class="goods-item left" v-for="(item, index) in leftList" :key="index">
                <view class="" @click="onGoodsDetail(item)">
                  <u-image
                    width="100%"
                    height="345rpx"
                    :src="item.picUrl"
                    border-radius="8"
                  ></u-image>
                  <view class="goods-info">
                    <view class="goods-title">{{ item.name }}</view>
                    <view class="goods-price dis-flex" v-if="item.type != 'groupon'">
                      <view class="old-price">
                        <text class="t">原价:¥</text>
                        <text class="n">{{ item.priceYuan }}</text>
                      </view>
                      <view class="vip-price">
                        <text class="t">会员价:¥</text>
                        <text class="n">{{ item.vipPriceYuan }}</text>
                      </view>
                    </view>
                    <view class="goods-price dis-flex" v-if="item.type == 'groupon'">
                      <view class="old-price">
                        <text class="t">原价:¥</text>
                        <text class="n">{{ item.originPriceYuan }}</text>
                        <!-- <text class="n" v-if="!item.originPrice">{{ item.priceYuan }}</text> -->
                      </view>
                      <view class="vip-price">
                        <text class="t">套餐价:¥</text>
                        <text class="n">{{ item.priceYuan }}</text>
                      </view>
                      <view class="vip-price">
                        <text class="t">会员价:¥</text>
                        <text class="n">{{ item.vipPriceYuan }}</text>
                      </view>
                    </view>
                    <view class="goods-point dis-flex">
                      <view
                        class="point"
                        v-if="item.skus && item.skus[0] && item.skus[0].pointDeductCount"
                      >
                        {{ item.skus[0].pointDeductCount }}积分抵¥{{
                          item.skus[0].pointDeductPriceYuan
                        }}
                      </view>

                      <view class="coupon" v-if="item.hasCoupon">优惠券</view>
                    </view>
                    <view
                      class="cryptocurrency"
                      v-if="item.skus && item.skus[0] && item.skus[0].cryptocurrencyDeductCount"
                    >
                      {{ item.skus[0].cryptocurrencyDeductCount }}豆抵¥{{
                        item.skus[0].cryptocurrencyDeductPriceYuan
                      }}
                    </view>
                  </view>
                  <view
                    class="store-info dis-flex flex-y-center flex-y-between"
                    @click.stop.prevent="onStore(item)"
                  >
                    <view class="oneline-hide-1">
                      {{ item.shop.name }}
                    </view>
                    <u-icon name="/static/enter.png" size="20"></u-icon>
                  </view>
                </view>
              </view>
            </block>
          </template>
          <template v-slot:right="{ rightList }">
            <block>
              <view class="goods-item" v-for="(item, index) in rightList" :key="index">
                <view class="" @click="onGoodsDetail(item)">
                  <u-image
                    width="100%"
                    height="345rpx"
                    :src="item.picUrl"
                    border-radius="8"
                  ></u-image>
                  <view class="goods-info">
                    <view class="goods-title">{{ item.name }}</view>
                    <view class="goods-price dis-flex" v-if="item.type != 'groupon'">
                      <view class="old-price">
                        <text class="t">原价:¥</text>
                        <text class="n">{{ item.priceYuan }}</text>
                      </view>
                      <view class="vip-price">
                        <text class="t">会员价:¥</text>
                        <text class="n">{{ item.vipPriceYuan }}</text>
                      </view>
                    </view>
                    <view class="goods-price dis-flex" v-if="item.type == 'groupon'">
                      <view class="old-price">
                        <text class="t">原价:¥</text>
                        <text class="n">{{ item.originPriceYuan }}</text>
                        <!-- <text class="n">{{ item.priceYuan }}</text> -->
                      </view>
                      <view class="vip-price">
                        <text class="t">套餐价:¥</text>
                        <text class="n">{{ item.priceYuan }}</text>
                      </view>
                      <view class="vip-price">
                        <text class="t">会员价:¥</text>
                        <text class="n">{{ item.vipPriceYuan }}</text>
                      </view>
                    </view>
                    <view class="goods-point dis-flex">
                      <view
                        class="point"
                        v-if="item.skus && item.skus[0] && item.skus[0].pointDeductCount"
                      >
                        {{ item.skus[0].pointDeductCount }}积分抵¥{{
                          item.skus[0].pointDeductPriceYuan
                        }}
                      </view>
                      <view class="coupon" v-if="item.hasCoupon">优惠券</view>
                    </view>
                    <view
                      class="cryptocurrency"
                      v-if="item.skus && item.skus[0] && item.skus[0].cryptocurrencyDeductCount"
                    >
                      {{ item.skus[0].cryptocurrencyDeductCount }}豆抵¥{{
                        item.skus[0].cryptocurrencyDeductPriceYuan
                      }}
                    </view>
                  </view>
                  <view
                    class="store-info dis-flex flex-y-center flex-y-between"
                    @click.stop.prevent="onStore(item)"
                  >
                    <view class="oneline-hide-1">
                      {{ item.shop.name }}
                    </view>
                    <u-icon name="/static/enter.png" size="20"></u-icon>
                  </view>
                </view>
              </view>
            </block>
          </template>
        </u-waterfall>
      </view>
      <view
        v-else
        class="dis-flex flex-y-center flex-x-center"
        style="margin-top: 40rpx; flex-flow: column"
      >
        <u-image :src="getImageUrl('empty.png')" width="300rpx" height="300rpx"></u-image>
        <view style="color: #999999">~_~</view>
      </view>
    </view>
    <view class="goods_area" v-if="checkPlateTypeIndex == 1">
      <StoreBox :itemList="itemList[1]"></StoreBox>
    </view>
    <view class="footer-fill"></view>

    <u-popup
      v-model="uploadPopup"
      :mask-close-able="false"
      mode="center"
      width="650rpx"
      height="400rpx"
    >
      <view style="padding: 20rpx; display: flex; flex-direction: column; align-items: center">
        <view class="" style="font-size: 35rpx; margin-bottom: 20rpx"> 应用更新中</view>
        <u-line-progress
          :show-percent="false"
          active-color="#2979ff"
          :percent="progress"
        ></u-line-progress>
        <view class="" style="margin-top: 20rpx; color: red"> 应用更新中请勿关闭程序...</view>
        <view @click="onClone" style="margin-top: 20rpx; color: red; text-align: center">
          若进度条100%后，程序未自动安装,请点击复制链接在浏览器中下载最新安装包更新
        </view>
        <view class="" style="margin-top: 20rpx; color: red">
          {{ failInstall }}
        </view>
      </view>
    </u-popup>
    <!-- 		<view class="" style="position: fixed;bottom: 50rpx;left: 50%;z-index: 9999999; ">
			<u-badge size="mini" :count="7" :offset="[-10,-12]" type="error"></u-badge>
		</view> -->
    <UFoooter ref="uTab"></UFoooter>
  </view>
</template>

<script>
import Vue from 'vue'
import { BASE_URL, STATIC_URL } from '@/common/config.js'
import Banner from '@/components/banner/index.vue'
import Special from '@/components/special/index.vue'
import UFoooter from '@/components/uTabbar.vue'
import StoreBox from '@/components/store_box.vue'

let systemInfo = uni.getSystemInfoSync()

export default {
  components: {
    Banner,
    Special,
    UFoooter,
    StoreBox
  },
  data() {
    return {
      scrollTop: 0,
      palteType: [
        {
          name: '生活商圈'
        },
        {
          name: '同城信息'
        }
      ],
      checkPlateTypeIndex: 0, //生活商圈，同城信息
      checkedTabIndex: 0, //生活商圈分类选择
      checkedTab1Index: 0, //同城信息分类
      statusBarHeight: systemInfo.statusBarHeight,
      progress: 0,
      uploadPopup: false,
      indexCat: 1,
      indexCatKey: '',
      showSelect: false,
      background: {
        background: 'transparent'
      },
      background1: {
        background: '#10A28F'
      },
      bannerList: [],
      ggList: [],
      dowloadUrl: '',
      BASE_URL,
      imgStyle: {
        width: '12rem'
      },
      customStyle: {
        padding: '15rpx 0px'
      },
      failInstall: '',
      bannarList: [],
      menuListnn: [],
      menuList2: [],
      selectOptions: [],
      scurrent: 0,
      current: 0,
      dataList: [],
      itemList: [[], []],
      tabsList: [
        {
          title: '全部'
        }
      ],
      tabsList1: [
        {
          name: '求职招聘'
        },
        {
          name: '房屋出租'
        },
        {
          name: '生意转让'
        },
        {
          name: '家政服务'
        },
        {
          name: '寻物找人'
        }
      ],
      order_id: '',
      categoryId: '',
      couponList: [],
      couponPopup: false,
      videoInfo: '',
      searchParams: '',
      isShowHope: false,
      goodsList: [],
      platformCategoryCode: '',
      address: {
        cityName: '',
        cityCode: ''
      },
      merchantOrderCount: 0,
      riderOrderCount: 0
    }
  },
  computed: {
    // 转换字符数值为真正的数值
    navbarHeight() {
      let h
      // #ifndef MP-WEIXIN
      h = this.height ? this.height : 50
      // #endif
      // #ifdef MP-WEIXIN
      // 小程序特别处理，让导航栏高度 = 胶囊高度 + 两倍胶囊顶部与状态栏底部的距离之差(相当于同时获得了导航栏底部与胶囊底部的距离)
      // 此方法有缺陷，暂不用(会导致少了几个px)，采用直接固定值的方式
      // return menuButtonInfo.height + (menuButtonInfo.top - this.statusBarHeight) * 2;//导航高度
      let height = systemInfo.platform == 'ios' ? 44 : 48
      h = this.height ? this.height : height
      // #endif
      return h
    }
  },
  onPageScroll(e) {
    this.scrollTop = e.scrollTop // 更新滚动位置
    console.debug('onPageScroll: scrollTop=' + this.scrollTop)
  },
  onLoad(options) {
    const inviteCode = options.inviteCode
    if (inviteCode) {
      console.log('获取到邀请码：' + inviteCode)
      uni.setStorageSync('saleMemberNo', inviteCode)
    }
  },
  onPullDownRefresh() {
    this.refreshData()
    setTimeout(() => {
      uni.stopPullDownRefresh()
    }, 1500)
  },
  onShow() {
    this.refreshData()
  },
  methods: {
    refreshData() {
      if (this.$refs.uTab && uni.getStorageSync('userIno')) {
        this.$refs.uTab.setCartTabBadge()
      }
      this.onCat(1)

      this.address = uni.getStorageSync('address') || {
        cityName: '',
        cityCode: ''
      }
      if (!this.address?.cityName) {
        // TODO 前期先不自动定位城市，以贵阳的数据为试点
        // this.initLocation()
      }

      this.appVersionCheck()
      this.wxSubscribeMessage()
      this.fetchAnnouncement()

      this.$u.get('/app-api/cms/qlink/top-list?identify=home_carousel&limit=6').then((res) => {
        this.bannerList = res.data
      })
      this.$u.get('/app-api/cms/qlink/list?identify=home_grid').then((res) => {
        this.menuListnn = res.data || []
      })
    },
    subCity(city) {
      return city.length > 4 ? city.substr(0, 4) + '...' : city
    },
    routeTo(url) {
      uni.navigateTo({
        url
      })
    },
    initLocation() {
      // #ifdef MP-WEIXIN
      wx.authorize({
        scope: 'scope.userFuzzyLocation',
        success: (res) => {
          wx.getFuzzyLocation({
            type: 'gcj02',
            success: (res) => {
              this.decodeLocation(res.latitude, res.longitude)
            },
            fail: (error) => {
              console.log('getFuzzyLocation.error', error)
              uni.setStorageSync('firstAddressPer', false)
            }
          })
        }
      })
      // #endif
      // #ifndef MP-WEIXIN
      uni.getLocation({
        type: 'gcj02',
        geocode: false,
        isHighAccuracy: true,
        success: (res) => {
          this.decodeLocation(res.latitude, res.longitude)
        },
        fail: function (res) {
          uni.setStorageSync('firstAddressPer', false)
        }
      })
      // #endif
    },
    decodeLocation(latitude, longitude) {
      uni.setStorageSync('firstAddressPer', true)
      this.$u
        .get('/app-api/system/region/location', {
          latitude,
          longitude
        })
        .then((res) => {
          this.address = res.data
          uni.setStorageSync('address', res.data)
        })
    },
    appVersionCheck() {
      // #ifdef APP
      uni.getSystemInfo({
        success: (res) => {
          if (res.osName == 'android') {
            this.$u.get('/app-api/cms/app-version/latest').then((res) => {
              plus.runtime.getProperty(plus.runtime.appid, (widgetInfo) => {
                this.dowloadUrl = res.data.url
                uni.dialog.confirm(
                  '更新提示',
                  '请升级APP到最新版本！',
                  () => {
                    this.uploadPopup = true
                    this.downloadPackage()
                  },
                  () => {
                    if (plus.os.name.toLowerCase() === 'android') {
                      plus.runtime.quit()
                    } else {
                      const threadClass = plus.ios.importClass('NSThread')
                      const mainThread = plus.ios.invoke(threadClass, 'mainThread')
                      plus.ios.invoke(mainThread, 'exit')
                    }
                  }
                )
              })
            })
          }
        }
      })
      // #endif
    },
    downloadPackage() {
      const task = plus.downloader.createDownload(this.dowloadUrl)
      task.addEventListener(
        'statechanged',
        (download, status) => {
          if (status == 200) {
            const { downloadedSize, totalSize, filename, state } = download
            const p = (downloadedSize / totalSize).toFixed(2) * 100
            const isComplete = state === 4
            this.progress = p
            console.log(['下载中' + p, 'status=' + status, '是否下载完成' + isComplete].join('，'))
            // onProgress && onProgress(p);
            if (isComplete) {
              console.log('下载完成，开始安装')
              plus.runtime.install(
                filename,
                {},
                () => {
                  console.log('安装成功')
                },
                () => {
                  this.failInstall = '安装失败,请重新打开应用！'
                }
              )
            }
          }
        },
        false
      )
      task.start()
    },
    wxSubscribeMessage() {
      // #ifdef MP-WEIXIN
      wx.showShareMenu({
        withShareTicket: true,
        menus: ['shareAppMessage', 'shareTimeline']
      })
      uni.requestSubscribeMessage({
        tmplIds: [
          'zGJrzwz6vzpgk58i6aHa-CkZNySaJyRVmrJzMPhQuRg',
          'MN8afG9m-eBj-11w5wIK4kO-EWMNgmaGUg9ypropxlU'
        ],
        success(res) {
          console.log(res)
        }
      })
      // #endif
    },
    onBanner(e) {
      if (this.bannarList[e].linkUrl.includes('http')) {
      } else {
        uni.navigateTo({
          url: this.bannarList[e].linkUrl
        })
      }
    },
    onCat(index) {
      this.indexCat = index
      this.checkPlateTypeIndex = index - 1
      if (index === 1) {
        this.$u.get('/app-api/cms/qlink/list?identify=lianmeng_shop_caitegory').then((res) => {
          this.tabsList = [
            {
              title: '全部'
            },
            ...res.data
          ]
          this.itemList = []
          this.queryList(1)
        })
      }
    },
    onStoreCategory(index) {
      this.checkedTabIndex = index
      this.platformCategoryCode = this.tabsList[index].subIdentify

      this.queryList(1)
    },
    onXinxiCategory(index) {
      this.checkedTab1Index = index
      this.categoryId = this.tabsList1[index].id
      this.queryList(1)
    },
    stopTouchMove() {
      return false
    },
    onClose() {
      this.couponPopup = false
    },
    onStore(item) {
      if (item.type == 'food') {
        uni.navigateTo({
          url: '/dine/diancan/diancanv2?shopId=' + item.shopId
        })
      } else if (item.type == 'housekeeping') {
        uni.navigateTo({
          url:
            '/other/merchant-center/merchant-center-service?id=' +
            item.shopId +
            '&shop=' +
            JSON.stringify(item.shop)
        })
      } else if (item.type == 'hotel') {
        uni.navigateTo({
          url:
            '/other/merchant-center/merchant-center-hotel?id=' +
            item.shopId +
            '&shop=' +
            JSON.stringify(item.shop)
        })
      } else if (item.type == 'entertainment') {
        uni.navigateTo({
          url:
            '/other/merchant-center/merchant-center-yule?id=' +
            item.shopId +
            '&shop=' +
            JSON.stringify(item.shop)
        })
      } else if (item.type == 'mall') {
        uni.navigateTo({
          url: '/shops/store?shopId=' + item.shopId
        })
      } else if (item.type == 'groupon') {
        uni.navigateTo({
          url: '/goods/comb-goods/comb-goods?combId=' + item.id + '&type=0&shopId=' + item.shopId
        })
      } else {
        uni.navigateTo({
          url: '/other/merchant-center/merchant-center?id=' + item.shopId
        })
      }
    },
    onGoodsDetail(item) {
      if (item.type == 'food') {
        uni.navigateTo({
          url: '/goods/goods-details/goods-details?goodsId=' + item.id
        })
      } else if (item.type == 'groupon') {
        uni.navigateTo({
          url: '/goods/comb-goods/comb-goods?combId=' + item.id + '&type=0&shopId=' + item.shopId
        })
      } else {
        uni.navigateTo({
          url: '/other/merchant-center/merchant-center?id=' + item.shopId
        })
      }
    },
    tabsChange(index) {
      if (index == 3) {
        this.$utils.route('/other/temporary-storage/temporary-storage')
      } else {
        this.current = index
      }
    },
    menuChange(index) {
      this.scurrent = index
      this.$refs.paging.reload()
    },
    onAllGoods() {
      this.$utils.route('/goods/all-goods/all-goods')
    },

    transition(e) {
      let dx = e.detail.dx
      this.$refs.uTabs.setDx(dx)
    },
    animationfinish(e) {
      this.current = e.detail.current
      this.scurrent = e.detail.current
      this.$refs.uTabs.setFinishCurrent(e.detail.current)
      this.queryList(1)
    },

    queryList(pageNo = 1, pageSize = 30) {
      if (this.indexCat === 1) {
        if (this.$refs.uWaterfall) {
          this.$refs.uWaterfall.clear()
        }
        this.$u
          .get('/app-api/product/spu/page', {
            pageNo,
            pageSize,
            platformCategoryCode: this.platformCategoryCode,
            o2o: true,
            cityCode: this.address?.cityCode || '',
            sortField: 'RANDOM'
          })
          .then((res) => {
            this.goodsList = res.data.list
          })
      } else {
        this.$u.api
          .getStoreList({
            pageNo,
            pageSize,
            cityCode: this.address?.cityCode || '',
            categoryId: this.current > 0 ? this.tabsList2[this.current - 1].id : 2
          })
          .then((res) => {
            if (this.current == 0) {
              this.$refs.paging.complete(res.data.list)
            } else {
              this.$refs.pagingz[this.current - 1].complete(res.data.list)
            }
          })
      }
    },
    handleSpecialClick() {
      if (this.merchantOrderCount > 0) {
        this.$utils.route('/store/order-list/order-list')
      } else if (this.riderOrderCount > 0) {
        this.$utils.route('/rider/order-list/order-list')
      }
    },
    onMenuPath(item) {
      if (item.linkUrl)
        uni.navigateTo({
          url: item.linkUrl
        })
      return
      // if (item.name == "在线拼团") {
      // 	getApp.product_type_id = item.product_type_id;
      // 	this.$utils.route({
      // 		url: '/goods/group-good-list/group-good-list'
      // 	});
      // } else if (item.name == "限时秒杀") {
      // 	this.$utils.route({
      // 		url: '/goods/flash-goods-list/flash-goods-list'
      // 	});
      // } else if (item.name == "施工信息") {
      // 	this.$utils.route({
      // 		url: '/other/construction/construction'
      // 	});
      // } else if (item.name == "商家入驻") {
      // 	if (uni.getStorageSync("userInfo").extras.groupCode == "shop_salesman") {
      // 		uni.showModal({
      // 			content: "业务员不能申请商家入驻！",
      // 			showCancel: false
      // 		})
      // 		return
      // 	}
      // 	if (!uni.getStorageSync("userInfo").idcardVerified) {
      // 		uni.dialog.confirm("温馨提示", "商家入驻需要实名认证，是否前往认证？", () => {
      // 			uni.navigateTo({
      // 				url: "/other/set-phone-pwd-realname/set-phone-pwd-realname?status=5"
      // 			})
      // 		})
      // 		return
      // 	}
      // 	uni.navigateTo({
      // 		url: "/other/apply_join/apply_join"
      // 	})
      // 	//this.$utils.route("/other/apply_join/apply_join")
      // } else {
      // 	this.$utils.route({
      // 		url: '/goods/resell-push/resell-push?name=' + item.name + '&categoryId=' + item.id
      // 	});
      // }
    },
    onFlashSale() {
      this.$utils.route('/goods/flash-goods/flash-goods')
    },
    onFlashDetails(item) {
      this.$utils.route({
        url: '/goods/flash-goods-details/flash-goods-details',
        params: {
          id: item.id
        }
      })
    },
    onVideoList() {
      this.$utils.route('/goods/video-list/video-list')
    },
    onRealtimeResale() {
      this.$utils.route({
        url: '/goods/realtime-resale/realtime-resale'
      })
    },
    onPreDetail(item) {
      this.$utils.route({
        url: '/goods/pre-goods-details/pre-goods-details',
        params: {
          id: item.id
        }
      })
    },
    onGroupDetail(item) {
      this.$utils.route({
        url: '/goods/group-goods-details/group-goods-details',
        params: {
          id: item.id
        }
      })
    },
    onCouponReceive() {
      let self = this
      self.$u.api.setNewCouponReceive().then((res) => {
        uni.$u.toast('领取成功')
        self.couponPopup = false
      })
    },
    onSearch() {
      this.$utils.route({
        url: '/goods/goods-search/goods-search'
      })
    },

    onMsg() {
      uni.navigateTo({
        url: '/other/message-center/message-center'
      })
    },

    onCity() {
      uni.$on('selectAddress', (res) => {
        console.log('selectAddress=' + JSON.stringify(res))
        this.address = res
        Vue.prototype.$address = this.address
        this.queryList(1)
        uni.$off('selectAddress')
      })
      uni.navigateTo({
        url: '/other/select-city/select-city'
      })
    },
    onClone() {
      uni.setClipboardData({
        data: STATIC_URL + '/download/',
        success: () => {
          this.$u.toast('链接复制成功，请前往浏览器打开该链接下安装app', 3000)
        }
      })
    },
    async fetchAnnouncement() {
      const merchantOrderCountRes = await this.$u.get('/app-api/shop/statistics/order-count')
      this.merchantOrderCount =
        merchantOrderCountRes.data.paidCount +
        merchantOrderCountRes.data.doingCount +
        merchantOrderCountRes.data.refundCount
      const riderOrderCountRes = await this.$u.get('/app-api/trade/order/get-count-rider')
      this.riderOrderCount = riderOrderCountRes.data.doingCount
      const noticeRes = await this.$u.get('/app-api/system/notice/page')
      this.ggList = noticeRes.data.list
    }
  }
}
</script>

<style scoped lang="scss">
.cate-left {
  white-space: nowrap;
  width: 100%;
  box-sizing: border-box;
  height: 100%;
}

.specialBanner {
  margin-top: 214rpx;
}

.cate-content {
  margin: 0 20rpx;
  background-color: #fff;
  padding: 20rpx;
  height: 200rpx;
  border-radius: 10rpx;
  display: flex;
  justify-content: space-between;
}

.type-nav {
  display: inline-block;
  margin-right: 22rpx;
  text-align: center;
  height: 100%;
}

.type-nav:last-child {
  margin-right: 0;
}

.cate-name {
  margin-top: 20rpx;
  font-weight: 400;
  font-size: 26rpx;
  color: #333333;
}

.cate-item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-flow: column;
  height: 100%;
}

.contentBanner {
  width: 100%;
  position: absolute;
  top: 110rpx;
}

.top-bar {
  position: relative;
  height: 100rpx;
  line-height: 100rpx;
  color: #fff;
}

.location {
  position: absolute;
  left: 20rpx;
  font-size: 32rpx;
  display: flex;
  align-items: center;
  top: 30rpx;
  color: #fff;
}

.nav-bar-cat {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 35rpx;
}

.app-nav-bar-cat {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 35rpx;
  display: flex;
  justify-content: center;
  text-align: center;
}

.msg {
  position: absolute;
  right: 20rpx;
}

.msg-box {
  position: relative;
}

.selcet-banner {
  width: 500rpx;
  display: flex;
  justify-content: space-around;
  margin: 15rpx 0;
}

.selcet-box {
  padding: 10rpx 20rpx;
  background-color: #ffffff;
  border-radius: 5rpx;
}

.category {
  width: 500rpx;
  display: flex;
  justify-content: space-around;
  font-size: 40rpx;
}

.navView {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0px 20rpx;
}

.menu-icon {
  width: 70rpx;
  height: 70rpx;
}

.plate-type-box {
  margin: 30rpx 0 0 20rpx;
}

.plate-item {
  margin-right: 50rpx;
  font-weight: 400;
  font-size: 28rpx;
  color: #666666;
  flex-flow: column;
}

.checked {
  font-weight: 500;
  font-size: 30rpx;
  color: #333333;
}

.plate-item-image {
  width: 36rpx;
  height: 8rpx;
  margin-top: 10rpx;
}

.tabs-box {
  margin: 20rpx;
}

.tabs-box-item {
  width: 128rpx;
  height: 44rpx;
  background: #ffffff;
  border-radius: 22rpx;
  margin-right: 20rpx;
  line-height: 44rpx;
  text-align: center;
  font-size: 24rpx;
  color: #666666;
}

.tabs-checked {
  background: #10a28f;
  color: #ffffff;
}

.goods_price {
  font-size: 25rpx;
  color: red;
  display: flex;
}

.price_tip {
  font-size: 35rpx;
}

.sales-volume1 {
  color: #999999;
}

.price_main {
  font-size: 36rpx;
}

.price_dot {
  align-self: flex-end;
}

.goods_tip {
  /* width: 110rpx; */
  /* height: 40rpx; */
  border-radius: 20rpx;
  border: 1px solid #fa453c;
  /* line-height: 40rpx; */
  text-align: center;
  font-size: 20rpx;
  color: #fa453c;
  margin-right: 20rpx;
  margin-bottom: 20rpx;
  padding: 2rpx 20rpx;
}

.goods_tip:last-child {
  margin-right: 0;
}

.goods_old_price {
  color: #89898a;
}

.storeName {
  font-size: 26rpx;
  font-weight: 400;
  color: #ffffff;
  line-height: 98px;
  margin-left: 10rpx;
  margin-right: 10rpx;
  margin-top: -4rpx;
}

.cabinetName {
  height: 30rpx;
  background: #ffffff50;
  border-radius: 5rpx;
  padding: 0px 10rpx;
  font-size: 22rpx;
  font-weight: 400;
  color: #ffffff;
  margin-right: 10rpx;
}

.searchView {
  margin: 20rpx 0 10rpx 0;
  padding: 0px 20rpx;
}

.zixuan {
  margin-top: 20rpx;
  margin-left: 20rpx;
  margin-right: 20rpx;
}

.tabView {
  display: flex;
  flex-direction: row;
}

.tabMenu {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 15rpx 20rpx;
  font-size: 35rpx;
  font-weight: 400;
  color: #ffffff;
}

.tabLine {
  margin: 10rpx 0;
  width: 35rpx;
  height: 6rpx;
  background: #ffffff;
  border-radius: 3rpx;
}

.bannarView {
  display: flex;
  flex-direction: column;
  margin: 10rpx 20rpx;
}

.menuView {
  display: flex;
  flex-direction: column;
  margin: 0px 20rpx;
  margin-top: 20rpx;
  background: #ffffff;
  border-radius: 20rpx;
  overflow: hidden;
  padding: 15rpx 0px;
}

.menuText {
  font-size: 24rpx;
  font-weight: 400;
  color: #333333;
  margin-top: 10rpx;
}

.merchant {
  display: flex;
  flex-direction: column;
  margin: 20rpx;
  padding: 0 20rpx;
  background: #ffffff;
  border-radius: 10rpx;
}

.merchant-title {
  padding: 30rpx 0;
  display: flex;
  align-items: center;
}

.sectionTitle {
  font-size: 36rpx;
  font-weight: bold;
  color: #84715e;
  background: linear-gradient(9deg, #f84443 0%, #ff946a 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.endView {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 45rpx;
  border-radius: 10rpx;
  overflow: hidden;
  margin-left: 30rpx;
}

.endTitle {
  color: #333333;
  height: 45rpx;
  line-height: 45rpx;
  font-size: 24rpx;
  padding: 0px 10rpx;
}

.endTime {
  color: #e84738;
  font-size: 24rpx;
  padding: 0px 10rpx;
}

.merchant-title-right {
  display: flex;
  flex-direction: row;
}

.sectionText {
  font-size: 26rpx;
  font-weight: 400;
  color: #666;
  margin-right: 10rpx;
}

.scrollView {
  background: #ffffff;
  border-radius: 20rpx;
  margin-bottom: 30rpx;
}

.merchant-box {
  display: flex;
  align-items: center;
}

.merchant-box-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 200rpx;
  margin-right: 20rpx;
  border-radius: 8rpx;
  border: 1px solid #f6f6f6;
}

.merchant-name {
  font-size: 28rpx;
  font-weight: 400;
  color: #333333;
  margin-top: 10rpx;
}

.goodsTitle {
  font-size: 20rpx;
  font-weight: 400;
  color: #333333;
  margin: 0px 8rpx;
  margin-top: 10rpx;
}

.goodsoPrice {
  font-size: 18rpx;
  color: #cccccc;
  text-decoration: line-through;
  margin: 0px 8rpx;
  margin-top: 10rpx;
}

.priceView {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 10rpx 8rpx;
}

.goodsPrice {
  flex: 1;
  font-size: 24rpx;
  font-weight: bold;
  color: #ff2323;
}

.goodsRowView {
  display: flex;
  flex-direction: row;
  margin: 0px 20rpx;
}

.timeView {
  flex: 1;
  max-width: 400rpx;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 20rpx;
  margin-right: 20rpx;
  padding: 20rpx;
}

.timeHeadView {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.timeTitle {
  font-size: 30rpx;
  font-weight: bolder;
  color: #000;
}

.timeText {
  font-size: 20rpx;
  font-weight: 400;
  color: #ffffff;
  width: 110rpx;
  height: 30rpx;
  line-height: 30rpx;
  text-align: center;
  background: #ff9300;
  border-radius: 20rpx 2rpx 16rpx 2rpx;
  margin-left: 20rpx;
}

.rowView {
  display: flex;
  flex-direction: row;
  margin-top: 20rpx;
}

.goodsView {
  flex: 1;
  display: flex;
  flex-direction: column;
  border: 1px solid #f6f6f6;
  border-radius: 8rpx;
}

.goodsStock {
  font-size: 20rpx;
  font-weight: 300;
  color: #999999;
  margin: 10rpx 0px;
  margin-left: 8rpx;
}

.goodsPrice2 {
  font-size: 18rpx;
  font-weight: 300;
  color: #666666;
  margin-left: 8rpx;
  margin-bottom: 20rpx;
}

.goodsPrice2 text {
  font-size: 24rpx;
  font-weight: bold;
  color: #ff2323;
}

.videoView {
  flex: 0.6;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 20rpx;
  padding: 20rpx;
}

.videoImage {
  width: 220rpx;
  height: 220rpx;
  background: #eeeeef;
  border-radius: 10rpx;
  overflow: hidden;
  margin-top: 20rpx;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.playIcon {
  width: 50rpx;
  height: 50rpx;
  position: absolute;
  opacity: 0.8;
  z-index: 10;
}

.boxView {
  display: flex;
  flex-direction: column;
  background: #eeeeef;
}

.choiceBoxView {
  display: flex;
  flex-direction: column;
  padding: 20rpx 30rpx;
  background: #eeeeef;
  z-index: 100;
  position: sticky;
  top: 0px;
}

.choiceView {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0rpx 30rpx;
  margin-top: 20rpx;
}

.choiceTitle {
  font-size: 40rpx;
  color: #333333;
}

.choiceText {
  font-size: 20rpx;
  font-weight: 400;
  color: #ffffff;
  width: 110rpx;
  height: 30rpx;
  line-height: 30rpx;
  text-align: center;
  background: #65be1a;
  border-radius: 20rpx 2rpx 16rpx 2rpx;
  margin-left: 20rpx;
}

.tabView2 {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.tabAction {
  height: 46rpx;
  line-height: 46rpx;
  text-align: center;
  background: #22b857;
  padding: 0px 15rpx;
  border-radius: 26rpx 6rpx 26rpx 6rpx;
  font-size: 28rpx;
  font-weight: 400;
  color: #ffffff;
  margin-right: 40rpx;
}

.tabTitle {
  height: 46rpx;
  line-height: 46rpx;
  text-align: center;
  padding: 0px 15rpx;
  font-size: 28rpx;
  font-weight: 400;
  color: #333;
  margin-right: 40rpx;
}

.otherView {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.otherView text {
  font-size: 26rpx;
  font-weight: 400;
  color: #666666;
  margin-right: 10rpx;
}

.itemListView {
  display: flex;
  flex-wrap: wrap;
  padding-left: 20rpx;
}

.itemView {
  width: calc(100% / 2 - 20rpx);
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 10rpx;
  margin-top: 20rpx;
  margin-right: 20rpx;
  overflow: hidden;
}

.itemTitle {
  font-size: 24rpx;
  font-weight: 400;
  color: #000000;
  margin: 15rpx;
}

.itemPriceView {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0px 15rpx;
  margin-bottom: 20rpx;
}

.itemPrice {
  flex: 1;
  font-size: 26rpx;
  font-weight: bold;
  color: #ff2323;
}

.saleView {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 20rpx;
  margin: 0px 20rpx;
  padding-bottom: 20rpx;
}

.saleItemView {
  display: flex;
  flex-direction: row;
  padding: 0px 20rpx;
  margin-top: 20rpx;
}

.saleInfo {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-left: 20rpx;
}

.saleTitle {
  font-size: 30rpx;
  font-weight: 400;
  color: #333333;
}

.saleText {
  font-size: 24rpx;
  font-weight: 400;
  color: #ff6407;
  margin-top: 10rpx;
}

.saleNum {
  font-size: 22rpx;
  font-weight: 400;
  color: #999999;
  margin-top: 20rpx;
}

.salePriceView {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 20rpx;
}

.salePrice {
  flex: 1;
  font-size: 28rpx;
  font-weight: 400;
  color: #ff2323;
}

.salePrice text {
  font-size: 36rpx;
  font-weight: bolder;
  color: #ff2323;
}

.saleBtn {
  width: 150rpx;
  height: 50rpx;
  line-height: 50rpx;
  text-align: center;
  background: #22b857;
  border-radius: 25rpx;
  font-size: 28rpx;
  font-weight: 400;
  color: #ffffff;
}

.groupView {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 20rpx;
  margin: 0px 20rpx;
  margin-top: 20rpx;
  overflow: hidden;
}

.groupTitleView {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 20rpx;
}

.groupTotal {
  width: 70rpx;
  height: 34rpx;
  line-height: 34rpx;
  text-align: center;
  background: #22b857;
  border-radius: 5rpx;
  font-size: 22rpx;
  font-weight: 400;
  color: #ffffff;
}

.groupTitle {
  font-size: 30rpx;
  font-weight: 400;
  color: #333333;
  margin-left: 10rpx;
}

.groupText {
  font-size: 24rpx;
  font-weight: 400;
  color: #ff6407;
  padding: 0px 20rpx;
}

.groupPriceView {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 20rpx;
}

.groupPrice {
  font-size: 28rpx;
  font-weight: 400;
  color: #ff2323;
}

.groupPrice text {
  font-size: 36rpx;
  font-weight: bold;
  color: #ff2323;
}

.groupOPrice {
  flex: 1;
  font-size: 24rpx;
  font-weight: 400;
  text-decoration: line-through;
  color: #bababa;
  margin-left: 10rpx;
}

.groupBtn {
  font-size: 28rpx;
  font-weight: 400;
  color: #ffffff;
  width: 150rpx;
  height: 56rpx;
  line-height: 56rpx;
  text-align: center;
  background: #22b857;
  border-radius: 28rpx;
}

.popupView {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.popupBoxView {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 500rpx;
  height: 580rpx;
}

.popupBg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
}

.popupContent {
  display: flex;
  flex-direction: column;
  z-index: 100;
}

.popupTitle {
  font-size: 46rpx;
  font-weight: bold;
  color: #ffffff;
  text-align: center;
  margin-top: 60rpx;
}

.popupText {
  font-size: 32rpx;
  font-weight: bold;
  color: #ffffff;
  text-align: center;
  margin-top: 20rpx;
}

.couponBox {
  background: #fdf8da;
  border-radius: 20rpx;
  margin: 0px 40rpx;
  margin-top: 20rpx;
}

.couponMoney {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: center;
  font-size: 28rpx;
  color: #ff5151;
  margin-top: 10rpx;
}

.couponMoney text {
  font-size: 69rpx;
  font-weight: bold;
  color: #ff5151;
  margin-right: 10rpx;
}

.couponLine {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.round {
  width: 30rpx;
  height: 30rpx;
  background: #ff5151;
  border-radius: 50%;
  margin-left: -15rpx;
  margin-right: -15rpx;
}

.couponLine2 {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent 50%, #ff5151 50%);
  background-size: 8px 100%;
}

.couponText {
  font-size: 24rpx;
  font-weight: 400;
  color: #787878;
  text-align: center;
  padding: 20rpx 0px;
}

.couponBtn {
  height: 64rpx;
  line-height: 64rpx;
  text-align: center;
  background: linear-gradient(180deg, #fe9104, #ffcb87);
  box-shadow: 0px 11rpx 18rpx 0px rgba(35, 24, 21, 0.15);
  border-radius: 32rpx;
  margin: 0rpx 50rpx;
  margin-top: 50rpx;
  font-size: 28rpx;
  font-weight: 400;
  color: #ffffff;
}

.imageIcon {
  width: 60rpx;
  height: 60rpx;
  margin-top: 40rpx;
}

page {
  background: #eeeeef;
  height: 100%;
}

.container {
  max-width: 100%;
  height: auto;
  overflow: hidden;
}

.slot-wrap {
  display: flex;
}

.contentBg {
  width: 100%;
  height: 317rpx;
  position: absolute;
  top: 0px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
}

.goods_area {
  padding: 20rpx;
}

.goods-item {
  background-color: #fff;
  border-radius: 10rpx;
  margin-bottom: 20rpx;

  .goods-info {
    padding: 20rpx;

    .goods-title {
      margin-bottom: 10rpx;
    }

    .goods-price {
      margin-bottom: 10rpx;
      flex-flow: column;

      .t {
        font-size: 26rpx;
      }

      .n {
        font-size: 32rpx;
        font-weight: 600;
      }

      .vip-price {
        color: #fa453c !important;
        // margin-left: 10rpx;
      }
    }

    .goods-point {
      align-items: center;

      .point {
        font-size: 24rpx;
        color: #ff6f10;
        margin-right: 20rpx;
      }

      .coupon {
        background: #ebfaf8;
        font-size: 20rpx;
        color: #10a28f;
        padding: 4rpx 10rpx;
        border-radius: 20rpx;
      }
    }

    .cryptocurrency {
      font-size: 24rpx;
      color: #ff6f10;
    }
  }
}

.goods-item.left {
  margin-right: 20rpx;
  width: calc(100% - 20rpx);
}

.store-info {
  padding: 20rpx 20rpx;
  padding-top: 0;
}
</style>
